<%--
  Created by IntelliJ IDEA.
  User: zhang
  Date: 2020-11-04
  Time: 13:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String path = request.getContextPath();%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>H+ 后台主题UI框架 - 主页</title>

    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">


    <%--<link rel="shortcut icon" href="/favicon.ico">--%>
    <link href="<%=path%>/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="<%=path%>/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="<%=path%>/static/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="<%=path%>/static/layui/css/layui.css" rel="stylesheet">
    <link href="<%=path%>/static/myTreeTable/module/treetable-lay/treetable.css" rel="stylesheet">

    <!--zTree-->
    <link href="<%=path%>/static/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css" rel="stylesheet">
    <!--===========================-->

</head>

<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">



<!--组织结构-->
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-lg12">
            <div  class="layui-fluid" style="margin-top: 15px;">
                <div class="layui-card" style="border-radius:20px;box-shadow: 10px 10px 5px #cccccc;padding: 5px;">
                    <div class="layui-card-body">
                        <button class="layui-btn layui-btn-sm" id="addUser" style="background-color: #1AB394;color: white;">新增角色</button>
                        <table id="roleTable" class="layui-table" lay-filter="roleTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 全局js -->
<script src="<%=path%>/static/layui/layui.all.js"></script>
<script src="<%=path%>/static/js/jquery.min.js?v=2.1.4"></script>
<script src="<%=path%>/static/js/bootstrap.min.js?v=3.3.6"></script>
<script src="<%=path%>/static/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="<%=path%>/static/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="<%=path%>/static/js/plugins/layer/layer.min.js"></script>
<script src="<%=path%>/static/js/hplus.js?v=4.1.0"></script>
<script type="text/javascript" src="<%=path%>/static/js/contabs.js"></script>
<script src="<%=path%>/static/js/plugins/pace/pace.min.js"></script>
<script src="<%=path%>/static/myjs/MyLayer.js"></script>
<!--ztree树-->
<!--<script src="/zTree_v3/js/jquery-1.4.4.min.js" type="application/javascript"></script>-->
<script src="<%=path%>/static/zTree_v3/js/jquery.ztree.all.min.js"></script>
<!--=================-->
<!--lay-event指定事件-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="stop" style="width:57px;height:22px;background-color:#1C84C6"><i class="layui-icon">&#x1006;</i>禁用</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit" style="width:57px;height:22px"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" style="width:57px;height:22px"><i class="fa fa-trash-o" aria-hidden="true"></i>删除</a>
</script>
<script>

    layui.use(['tree','table','layer'], function(){
        var tree = layui.tree;
        var table = layui.table;
        var layer = layui.layer;
        //监听工具条
        table.on('tool(userTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'stop') {
                alert("禁用" + data.name);
            }
            if (layEvent === 'del') {
                alert('删除' + data.name);
            }
            if (layEvent === 'edit') {
                alert('修改' + data.name);
            }
        });

        //第一个实例
        table.render({
            elem: '#roleTable'
            ,height: 312
            ,url: '<%=path%>/static/json/role.json' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'name', title: '角色名', sort: true}
                ,{field: 'perms', title: '权限'}
                ,{field: 'dataScope', title: '数据范围'}
                /*,{field: '', title: '创建时间'}*/
                ,{fixed: 'operation', title: '操作', toolbar: '#barDemo',  fixed: 'right', width:250}
            ]]
        });

        $(function(){
            $("#addUser").click(function(){
                MyLayer.iframeLayer(layer,'添加角色',"<%=path%>/system/addRole")
            })
        });

    });

</script>
</body>

</html>
